<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="1200" height="600"></canvas>
</body>
<script type="text/javascript" src="../Charpter-05/requestNextAnimationFrame.js"></script>
<script type="text/javascript" src="Sprite.js"></script>
<script type="text/javascript" src="SpriteSheetPainter.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d'),
		spritesheet = new Image(),
		cells = [
			{ left: 0, top: 0, width: 205, height: 205 },
			{ left: 205, top: 0, width: 205, height: 205 },
			{ left: 410, top: 0, width: 205, height: 205 },
			{ left: 615, top: 0, width: 205, height: 205 },
			{ left: 820, top: 0, width: 205, height: 205 },
			{ left: 1025, top: 0, width: 205, height: 205 },
			{ left: 1230, top: 0, width: 205, height: 205 },
			{ left: 1435, top: 0, width: 205, height: 205 },
			{ left: 1640, top: 0, width: 205, height: 205 },
			{ left: 1845, top: 0, width: 205, height: 205 },
			{ left: 2050, top: 0, width: 205, height: 205 },
			{ left: 2255, top: 0, width: 205, height: 205 },
			{ left: 2460, top: 0, width: 205, height: 205 },
			{ left: 2665, top: 0, width: 205, height: 205 },
			{ left: 2870, top: 0, width: 205, height: 205 },
			{ left: 3075, top: 0, width: 205, height: 205 },
			{ left: 3280, top: 0, width: 205, height: 205 },
			{ left: 3485, top: 0, width: 205, height: 205 },
			{ left: 3690, top: 0, width: 205, height: 205 },
			{ left: 3895, top: 0, width: 205, height: 205 },
			{ left: 4100, top: 0, width: 205, height: 205 },
			{ left: 4305, top: 0, width: 205, height: 205 },
			{ left: 4510, top: 0, width: 205, height: 205 },
			{ left: 4715, top: 0, width: 205, height: 205 },
			{ left: 4920, top: 0, width: 205, height: 205 },
			{ left: 5125, top: 0, width: 205, height: 205 }
		],

	// Behaviors................................................................

		runInPlace = {
			lastAdvance: 0,
			PAGEFILP_INTERVAL: 33,

			execute: function(sprite, context, time){
				if(time - this.lastAdvance > this.PAGEFILP_INTERVAL){
					sprite.painter.advance();
					this.lastAdvance = time;
				}
			}
		},

		moveLeftToRight = {
			lastMove: 0,

			execute: function(sprite, context, time){
				if(this.lastMove !== 0){
					sprite.left -= sprite.velocityX * ((time - this.lastMove) / 1000);

					if(sprite.left < -sprite.width){
						sprite.left = canvas.width;
					}
				}

				this.lastMove = time;
			}
		},

	// Sprite.....................................................................

		sprite1 = new Sprite('longxingdonghai1', new SpriteSheetPainter(cells), [runInPlace, moveLeftToRight]),
		sprite2 = new Sprite('longxingdonghai2', new SpriteSheetPainter(cells), [runInPlace, moveLeftToRight]),
		sprite3 = new Sprite('longxingdonghai3', new SpriteSheetPainter(cells), [runInPlace, moveLeftToRight]),
		sprites = [sprite1, sprite2, sprite3];

// Functions.....................................................................

	// 绘制背景
	function drawBackground(){
		var STEP_Y = 12,
			i = canvas.height;

		while(i < STEP_Y * 4){
			context.beginPath();
			context.moveTo(0, i);
			context.lineTo(canvas.width, i);
			context.stroke();
			i -= STEP_Y;
		}
	}

// Animation.......................................................................

	// 动画
	function animate(time){
		time = +new Date();

		context.clearRect(0, 0, canvas.width, canvas.height);
		drawBackground();
		context.drawImage(spritesheet, 0, 0);

		for(var i = 0; i < sprites.length; i++){
			sprites[i].update(context, time);
			sprites[i].paint(context);
		}
		// sprite.update(context, time);
		// sprite.paint(context);

		window.requestNextAnimationFrame(animate);
	}

// Initialization.................................................................

	spritesheet.src = 'spritesheet.png';
	spritesheet.onload = function(e){
		context.drawImage(spritesheet, 0, 0);
	};

	for(var i = 0; i < sprites.length; i++){
		sprites[i].left = 205 * i + 50;
		sprites[i].top = 300;
		sprites[i].width = 205;
		sprites[i].velocityX = 50;
	}

	console.log(sprites);
	// sprite.left = 100;
	// sprite.top = 300;
	// sprite.width = 205;
	// sprite.velocityX = 50;

	context.strokeStyle = 'lightgray';
	context.lineWidth = 0.5;

	drawBackground();
	animate();
</script>
</html>